<!-- Animation.css动画效果，上下滑动都能实现模块缩放 -->
<template>
    <div id="app">
      <!-- 第一屏 -->
      <section class="section">欢迎来到第一页</section>
  
      <!-- 动态生成的内容模块 -->
      <!-- v-for 循环生成多个内容块 -->
      <!-- :key 确保每个块有唯一标识 -->
      <!-- :ref 动态绑定模块的 DOM 引用 -->
      <section
        v-for="(item, index) in items"
        :key="index"
        class="section hidden"
        :ref="el => (sectionRefs[index] = el)"
      >
        第 {{ index + 2 }} 屏内容
      </section>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from "vue";
  
  // 模拟内容模块数据（共生成 5 个模块）
  const items = Array.from({ length: 5 }, (_, i) => i + 1);
  
  // 存储每个模块的 DOM 引用数组
  const sectionRefs = ref([]);
  
  // 初始化 Intersection Observer
  onMounted(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 模块进入视口时：
            // 1. 添加 'animate' 类触发缩放动画
            // 2. 移除 'hidden' 类，使模块可见
            entry.target.classList.add("animate");
            entry.target.classList.remove("hidden");
          } else {
            // 模块离开视口时：
            // 1. 移除 'animate' 类以重置动画
            // 2. 添加 'hidden' 类，使模块再次隐藏
            entry.target.classList.remove("animate");
            entry.target.classList.add("hidden");
          }
        });
      },
      { threshold: 0.2 } // 当模块至少有 20% 可见时触发
    );
  
    // 遍历所有模块，监听它们的进入/离开视口事件
    sectionRefs.value.forEach((el) => {
      if (el) observer.observe(el);
    });
  });
  </script>
  
  <style scoped lang="scss">
  
  /* 模块通用样式 */
  .section {
    height: 100vh; /* 模块高度为整个视口高度 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平方向居中 */
    align-items: center; /* 垂直方向居中 */
    font-size: 2rem; /* 字体大小 */
    background-color: #f0f0f0; /* 背景色 */
    border-bottom: 1px solid #ddd; /* 底部分割线 */
    opacity: 0; /* 初始透明度 */
    transform: scale(0.8); /* 初始缩放比例为 80% */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* 缩放和透明度的动画效果 */
  }
  
  /* 隐藏模块样式 */
  .hidden {
    opacity: 0; /* 隐藏时透明度为 0 */
  }
  
  /* 缩放动画样式 */
  .animate {
    opacity: 1; /* 动画开始时完全可见 */
    transform: scale(1); /* 动画放大到原始大小 */
  }
  </style>
  